//html {
//  overflow-y: scroll;
//}
//:root {
//  overflow-y: auto;
//  overflow-x: hidden;
//}
//:root body{
//  position: absolute;
//}
//body {
//  width: 100vw;
//  overflow: hidden;
//}
  //  超出隐藏
.t-o-e {
  display: -webkit-box;                // 类型
  /* autoprefixer: ignore next */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;               // 指定行数
  overflow: hidden;                    // 超出部分隐藏
  word-break: break-all;               // 换行处理方式：允许在单词内换行
  word-wrap: break-word;               // 允许在长单词或 URL 地址内部进行换行。
}
.o-f{
  overflow: hidden;
}

//  超出隐藏
.t-o-e-2 {
  display: -webkit-box;                // 类型
  /* autoprefixer: ignore next */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;               // 指定行数
  overflow: hidden;                    // 超出部分隐藏
  word-break: break-all;               // 换行处理方式：允许在单词内换行
  word-wrap: break-word;               // 允许在长单词或 URL 地址内部进行换行。
}

//  阴影
.box-shadow{
  box-shadow: 0 6px 20px 6px rgba(0,0,0, 0.05);
}

//  垂直分割线
.v-line {
  position: relative;
  width: 1PX;
  height: 100%;
  transform: scale(0.5, 1);
  &:after {
    position: absolute;
    content: '';
    bottom: 0;
    width: 1PX;
    height: 100%;
    background: rgba(153, 153, 153, .5);
    transform: scale(0.5, 1);
    transform-origin: center bottom;
  }
}

//  水平分割线
.h-line {
  position: relative;
  height: 1PX;
  width: 100%;
  transform: scale(1, 0.5);
  &:after {
    position: absolute;
    content: '';
    bottom: 0;
    height: 1PX;
    width: 100%;
    background: rgba(153, 153, 153, .5);
    transform: scale(1, 0.5);
    transform-origin: center bottom;
  }
}

////  全部边框样式
//.border{
//  position: relative;
//  width: 100%;
//  &:after {
//    position: absolute;
//    top: 0;
//    left: 0;
//    content: "";
//    border: 1PX solid #ccc;
//    width: 200%;
//    height: 200%;
//    transform-origin: 0 0;
//    transform: scale(0.5, 0.5);
//  }
//}

//  细小的边框（兼容性强、稳定）
.thin-border{
  width: 100%;
  position: relative;
  &:after {
    top: 0;
    left: 0;
    right: 0;
    width: calc(200% - 4px);// 避免多出部分
    height: calc(200% - 4px);// 避免多出部分
    bottom: 0;
    border: 1PX solid #f4f4f4;
    content: "";
    position: absolute;
    transform: scale(0.5, 0.5);
    pointer-events: none;// 定位穿透
    transform-origin: 0 0;
  }
}

//  细小的底部边框
.thin-border__b{
  position: relative;
  width: 100%;
  &:after {
    left: 0;
    right: 0;
    bottom: 0;
    content: "";
    position: absolute;
    border-bottom: 1PX solid #f4f4f4;
    transform: scaleY(0.5);
  }
}

//  细小的左边边框
.thin-border__l{
  position: relative;
  &:after {
    top: 0;
    left: 0;
    bottom: 0;
    content: "";
    position: absolute;
    transform: scaleX(0.5);
    border-left: 1PX solid #f4f4f4;
  }
}

//  细小的右边边框
.thin-border__r{
  position: relative;
  &:after {
    top: 0;
    right: 0;
    bottom: 0;
    content: "";
    position: absolute;
    transform: scaleX(0.5);
    border-right: 1PX solid #f4f4f4;
  }
}

//  细小的顶部边框
.thin-border__t{
  position: relative;
  width: 100%;
  &:before {
    top: 0;
    left: 0;
    right: 0;
    content: "";
    position: absolute;
    transform: scaleY(0.5);
    border-top: 1PX solid #f4f4f4;
  }
}

.l-h-o{line-height: 1 !important;}
.l-h-1{line-height: 1 !important;}

.f-s-20{font-size: 20px !important;}
.f-s-22{font-size: 22px !important;}
.f-s-24{font-size: 24px !important;}
.f-s-26{font-size: 26px !important;}
.f-s-28{font-size: 28px !important;}
.f-s-30{font-size: 30px !important;}
.f-s-32{font-size: 32px !important;}
.f-s-34{font-size: 34px !important;}
.f-s-36{font-size: 36px !important;}
.f-s-38{font-size: 38px !important;}
.f-s-40{font-size: 40px !important;}
.f-s-42{font-size: 42px !important;}
.f-s-44{font-size: 44px !important;}
.f-s-46{font-size: 46px !important;}
.f-s-48{font-size: 48px !important;}
.f-s-50{font-size: 50px !important;}










.d-f{display: flex !important;}
.d-i-f{display: inline-flex;}

//  flex-direction属性决定主轴的方向（即项目的排列方向）。
.f-d-r{flex-direction: row;}
.f-d-r-r{flex-direction: row-reverse;}
.f-d-c{flex-direction: column;}
.f-d-c-r{flex-direction: column-reverse;}

//  默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
.f-w-n{flex-wrap: nowrap;}
.f-w-w{flex-wrap: wrap;}
.f-w-w-r{flex-wrap: wrap-reverse;}

.j-c-s{justify-content: flex-start;}
.j-c-e{justify-content: flex-end;}
.j-c-c{justify-content: center;}
.j-c-b{justify-content: space-between;}
.j-c-a{justify-content: space-around;}

.a-i-f-s{align-items: flex-start;}
.a-i-f-e{align-items: flex-end;}
.a-i-c{align-items: center;}
.a-i-b{align-items: baseline;}
.a-i-s{align-items: stretch;}

//  align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
.a-s-a{align-self: auto;}
.a-s-f-s{align-self: flex-start;}
.a-s-f-e{align-self: flex-end;}
.a-s-c{align-self: center;}
.a-s-b{align-self: baseline;}
.a-s-s{align-self: stretch;}




/************************/
/*  ——————————————————  */
/* |                  | */
/* |     100 x 10     | */
/* |                  | */
/*  ——————————————————  */
/************************/

//  width: 100%
.w-p-100{width: 100% !important;}
//  width: 100%
.h-p-100{height: 100% !important;}





/*****************/
/*  ———————————  */
/* | 1 | 2 | 3 | */
/*  ——— ——— ———  */
/* | 4 | 5 | 6 | */
/*  ——— ——— ———  */
/* | 7 | 8 | 9 | */
/*  ——— ——— ———  */
/*****************/
//  对齐方式
.f-g-1{display: flex;align-items: flex-start;justify-content: flex-start;}
.f-g-2{display: flex;align-items: flex-start;justify-content: center;}
.f-g-3{display: flex;align-items: flex-start;justify-content: flex-end;}
.f-g-4{display: flex;align-items: center;justify-content: flex-start;}
.f-g-5{display: flex;align-items: center;justify-content: center;}
.f-g-6{display: flex;align-items: center;justify-content: flex-end;}
.f-g-7{display: flex;align-items: flex-end;justify-content: flex-start;}
.f-g-8{display: flex;align-items: flex-end;justify-content: center;}
.f-g-9{display: flex;align-items: flex-end;justify-content: flex-end;}





/*********************************/
/* 8                             */
/*               8               */
/*                             8 */
/* 8                           8 */
/*********************************/
.t-a-l{text-align: left;}
.t-a-c{text-align: center;}
.t-a-r{text-align: right;}
.t-a-j{text-align: justify;text-align-last: justify;}








/*********************************************************/
/*      margin               8                           */
/*      ———————————————————————————————————————————      */
/*     |      border         1                     |     */
/*     |      -------------------------------      |     */
/*     |     |      padding  8               |     |     */
/*     |     |      ———————————————————      |     |     */
/*     |     |     |                   |     |     |     */
/*  8  |  1  |  8  |        div        |  8  |  1  |  8  */
/*     |     |     |                   |     |     |     */
/*     |     |      ———————————————————      |     |     */
/*     |     |               8               |     |     */
/*     |      -------------------------------      |     */
/*     |                     1                     |     */
/*      ———————————————————————————————————————————      */
/*                           8                           */
/*********************************************************/



/*********************************/
/*      margin   8               */
/*      ———————————————————      */
/*     |                   |     */
/*  8  |        div        |  8  */
/*     |                   |     */
/*      ———————————————————      */
/*               8               */
/*********************************/

.m-t-10{margin-top: 10px;}
.m-t-20{margin-top: 20px;}
.m-t-30{margin-top: 30px;}
.m-r-10{margin-right: 10px;}
.m-r-20{margin-right: 20px;}
.m-b-10{margin-bottom: 10px;}
.m-b-20{margin-bottom: 20px;}
.m-b-30{margin-bottom: 30px;}
.m-l-10{margin-left: 10px;}
.m-l-20{margin-left: 20px;}


/*********************************/
/*      padding  8               */
/*      ———————————————————      */
/*     |                   |     */
/*  8  |        div        |  8  */
/*     |                   |     */
/*      ———————————————————      */
/*               8               */
/*********************************/

.p-0{padding: 0 !important;}
.p-t-10{padding-top: 10px;}
.p-l-10{padding-left: 10px;}
.p-r-10{padding-right: 10px;}
.p-b-10{padding-bottom: 10px;}








//  绝对定位四周
.p-a-a{
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
}

//  绝对定位开口向左
.p-a-n-l{
  top: 0;
  right: 0;
  bottom: 0;
  position: absolute;
}

//  绝对定位开口向上
.p-a-n-t{
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
}

//  绝对定位开口向右
.p-a-n-r{
  top: 0;
  left: 0;
  bottom: 0;
  position: absolute;
}

//  绝对定位开口向下
.p-a-n-b{
  top: 0;
  left: 0;
  right: 0;
  position: absolute;
}








.hover-class--btn{
  overflow: hidden;
  position: relative;
}
.hover-class--btn:after{
  content: "";
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  background-color: rgba(0, 0, 0, .2);
  border: none;
}













//  页面背景
.page-bg{
  &:before{
    content: '';
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    position: fixed;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top;
  }
}
